<template>
  <view class="card-detail-page relative">
    <view v-if="loading" class="box-border p-3">
      <wd-skeleton :row-col="imageGroup" />
    </view>
    <scroll-view v-else scroll-y class="scroll-box mb-10">
      <view class="w-full h-full p-3 box-border">
        <!-- TODO: 动画优化。。 -->
        <wd-transition :show="isShowCompare" name="fade">
          <view
            class="absolute top-3 left-0 h-[560rpx] w-full bg-[#ffffff] z-10 px-[20rpx] box-border"
          >
            <wd-img :src="originImgList?.[0]" width="100%" height="100%" mode="aspectFit" />
          </view>
        </wd-transition>
        <wd-transition :show="!isShowCompare" name="fade">
          <wd-swiper
            v-model:current="current"
            :list="swiperList"
            :autoplay="false"
            :indicator="{ showControls: !!(swiperList && swiperList.length > 1) }"
            :loop="false"
            imageMode="aspectFit"
            @longpress="onLongPress"
            @touchend="onTouchend"
          />
        </wd-transition>

        <!-- 对比logo -->
        <view
          class="absolute top-[500rpx] right-[32rpx] h-[50rpx] w-[50rpx] z-9 pointer-events-none"
        >
          <wd-img :src="Comparator" width="100%" height="100%" mode="aspectFit" />
        </view>

        <view class="flex justify-between mt-[584rpx]">
          <wd-button type="error" @tap="onTransmit">传送到AI工具</wd-button>
          <!-- TODO: 加上记录接口 /hts/record -->
          <wd-button
            type="error"
            :disabled="isSaving"
            @tap="onSaveImage(swiperList?.[current] || '')"
          >
            {{ isSaving ? "保存中..." : "保存到手机" }}
          </wd-button>
        </view>

        <wd-divider content-position="left" custom-class="divider"> 工作流-灵感迁移 </wd-divider>
        <view class="workflow text-[28rpx]">
          <wd-row v-if="cardDetail?.template">
            <wd-col :span="6"><text class="title">模板</text></wd-col>
            <wd-col :span="18">
              <text>{{ cardDetail?.template }}</text>
            </wd-col>
          </wd-row>
          <wd-row v-if="originImgList && originImgList.length">
            <wd-col :span="6"><text class="title">原图</text></wd-col>
            <wd-col :span="18">
              <!-- 有可能有多张原图 -->
              <scroll-view scroll-x class="w-full">
                <view class="text-right h-[200rpx] flex gap-4">
                  <view
                    v-for="(item, index) in originImgList"
                    :key="item"
                    class="origin-img w-[200rpx] h-[240rpx]"
                    @tap="onPreview(index)"
                  >
                    <wd-img width="100%" height="200rpx" mode="aspectFit" :src="item" />
                  </view>
                </view>
              </scroll-view>
            </wd-col>
          </wd-row>
          <wd-row>
            <wd-col :span="6">
              <text class="title">描述</text><wd-icon name="file-copy" size="28rpx" />
            </wd-col>
            <wd-col :span="18">
              <view class="text-left">
                <!-- <wd-textarea
                  v-model="decText"
                  readonly
                  auto-height
                  disable-default-padding
                ></wd-textarea> -->
                <text class="break-all"> {{ cardDetail?.cardDesc }}</text>
              </view>
            </wd-col>
          </wd-row>
          <wd-row>
            <wd-col :span="6"><text class="title">时间</text></wd-col>
            <wd-col :span="18"> <view class="text-right" /> {{ cardDetail?.createtime }} </wd-col>
          </wd-row>
        </view>
      </view>
    </scroll-view>
    <div class="sticky-footer">
      <view class="text-[#ffffff] flex flex-col items-center">
        <wd-icon
          :name="!bookmarkStatus ? 'star' : 'star-filled'"
          size="44rpx"
          :color="!bookmarkStatus ? '#ffffff' : '#c13432'"
          @tap="onChangeStatus"
        />
        <text class="text-[28rpx]">收藏</text>
      </view>
      <wd-button type="error">生成同款</wd-button>
    </div>
  </view>
</template>
<script lang="ts" setup>
import UseCardInfoAPI from "./hooks/useCardInfoAPI";
import Comparator from "@/static/svg/comparator.svg";
import { useSaveImage } from "@/hooks/useImageDowload";

const imageGroup = [
  { height: "171px" },
  1,
  [{ width: "93px" }, { width: "32px", marginLeft: "41px" }],
  [{ width: "93px" }, { width: "32px", marginLeft: "41px" }],
  [{ width: "93px" }, { width: "32px", marginLeft: "41px" }],
];
const cardId = ref("");
const cardExample = ref<UseCardInfoAPI>();
const loading = ref(true);
const current = ref<number>(0);

onLoad((option) => {
  cardId.value = option?.id || "";
  cardExample.value = new UseCardInfoAPI(cardId.value);

  // 监听页面数据是否加载完毕
  watch(
    () => cardExample.value?.pageLoading,
    (isLoading) => {
      loading.value = isLoading?.value as boolean;
    },
  );
});

// 计算属性确保安全访问
const cardDetail = computed(() => {
  return cardExample.value?.cardDetail;
});

// 轮播图列表/ai生成图
const swiperList = computed({
  set(val: string[]) {
    swiperList.value = val;
  },
  get() {
    return (
      cardExample.value?.cardDetail?.aiCreateImgs &&
      (cardExample.value?.cardDetail.aiCreateImgs?.map((item) => item.originalUri || "") || [])
    );
  },
});

// 原图
const originImgList = computed(() => {
  return (
    cardExample.value?.cardDetail?.originalImgs &&
    (cardExample.value?.cardDetail.originalImgs?.map((item) => item.originalUri || "") || [])
  );
});

// 原图预览
const onPreview = (index: number) => {
  uni.previewImage({
    current: index,
    urls: cardExample.value?.cardDetail.originalImgs?.map((item) => item.originalUri || "") || [],
    showmenu: false,
  });
};

/* 原图对比 */
const isShowCompare = ref(false);
const onLongPress = () => {
  isShowCompare.value = true;
};
const onTouchend = () => {
  isShowCompare.value = false;
};

const { isSaving, saveImage } = useSaveImage();
// 下载到手机
const onSaveImage = (imgUrl: string) => {
  if (!imgUrl) {
    uni.showToast({
      icon: "none",
      title: "下载失败",
    });
    return;
  }

  saveImage(imgUrl);
};

/** 收藏相关 */
const bookmarkStatus = ref<boolean>(false);

// 收藏状态切换
const onChangeStatus = () => {
  bookmarkStatus.value = !bookmarkStatus.value;
};

// 传送到AI工具
const onTransmit = () => {
  uni.showToast({
    icon: "none",
    title: "TODO",
  });
};
</script>
<style lang="scss" scoped>
.card-detail-page {
  position: relative;
  .scroll-box {
    height: calc(100vh - 150rpx);

    .title {
      @apply font-bold text-[#4c4c4c];
    }
  }
  .sticky-footer {
    @apply flex justify-between items-center bg-[#222222]   box-border;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    padding: 32rpx;
    /* 适配 iPhoneX 等安全区域 */
    // padding-bottom: constant(safe-area-inset-bottom);
    // padding-bottom: env(safe-area-inset-bottom);
  }

  .origin-img {
    @apply flex items-center justify-center  rounded-[10rpx] overflow-hidden flex-shrink-0;
  }

  :deep(.wd-row) {
    margin-bottom: 32rpx;
  }
  :deep(.wd-textarea) {
    padding-top: 0 !important;
  }

  :deep(.wd-swiper) {
    position: absolute !important;
    top: 24rpx;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 560rpx;
    padding: 0 20rpx;
  }
  :deep(.wd-swiper-nav--dots) {
    display: none;
  }

  :deep(.wd-swiper__track) {
    height: 560rpx !important;
    .wd-swiper__item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
  }

  :deep(.wd-swiper__image) {
    height: 100% !important;
  }

  :deep(.wd-textarea__inner) {
    word-wrap: break-all;
  }
}
</style>
